<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>终点文学网登录页</title>
		<script src="__PUBLIC__/jq/jquery-3.0.0.min.js"></script>
		<style>
			a{
				text-decoration:none;
				color:black;
			}
			.head{
				width:100%;
				height:80px;
				background:#f8f8f8;
			}
			.head .h1{
				float:right;
				margin-right:20px;
				margin-top:20px;
				font-size:14px;
			}
			.main{
				width:80%;
				height:500px;
				margin:0 auto;
				margin-top:40px;
			}
			.main .left{
				width:60%;
				height:500px;
				float:left;
			}
			.main .right{
				width:35%;
				float:right;
			}
			.main .right div b{
				width:100%;
				height:50px;
				font-size:30px;
				line-height:50px;
			}
			table{
				line-height: 50px;
			}
		</style>
	</head>
	<body>
		<!-- 头部开始 -->
		<div class="head">
			<a href="<{:U('home/index/index')}>"><img src="__UPLOAD__/<{$b.photo}>" alt="" width=160 height=80 style="margin-left:20px"></a>
			<div class="h1"><a href="<{:U('home/index/index')}>">首页</a>&nbsp;&nbsp;<a href="<{:U('home/login/index')}>">登录</a> | <a href="<{:U('home/zhuce/index')}>">注册</a></div>
		</div>
		<!-- 头部结束 -->
		<!-- 主体开始 -->
		<div class="main">
			<!-- 主体左边 -->
			<div class="left"><img src="__PUBLIC__/image/login.jpg" alt="" width="100%" height=500></div>
			<!-- 主体左边结束 -->
			<!-- 主体右边 -->
			<div class="right">
			<center>
				<br>
				<div><b>登录</b></div>
				<!-- 登录表单 -->
				<form action="<{:U('login/login')}>" method="post" name="regForm" onsubmit="return checkForm()">
					<table>
						<tr>
							<td><b>用户名:</b></td><hr>
							<td><input class="name" type="text" name="name" style="width:200px;height:30px;border-radius:3px;border:1px solid black;" placeholder="请输入你的账号"></td>
						</tr>
						<tr><td id="e" style="color:red;font-size:10px" colspan='2'></td></tr>
						<tr>
							<td><b>密码:</b></td>
							<td><input type="password" name="password" style="width:200px;height:30px;border-radius:3px;border:1px solid black;" placeholder="请输入密码"></td>
						</tr>
						<tr><td id="p" style="color:red;font-size:10px" colspan='2'></td></tr>
						<tr>
							<td><b>验证码:</b></td>
							<td><input type="text" name="yzm" id="yzm" style="width:200px;height:30px;border-radius:3px;border:1px solid black;" placeholder="请输入验证码"></td>
						</tr>
						<tr id="y"><td style="color:red;font-size:10px" colspan='2'></td></tr>
						<tr style="width:250px;height:62px">
							<td colspan='2'><!-- <a href="<{:U('Home/login/index')}>" class="sx"> --><img src="<{:U('Home/yzm/yzm')}>"  onclick="this.src=this.src+'?i='+Math.random();" title="点击刷新"><!-- </a> --></td>
						</tr>
						<tr>
							<td colspan='2'><input type="submit" value="登录" style="width:200px;height:30px;border-radius:3px;border:1px solid black;font-size:20px;font-weight:bold;margin-left:13%"></td>
						</tr>
					</table>
				</form>
				<a href="<{:U('Home/zhuce/index')}>">没有账号？赶紧注册一个</a>
			</center>
			</div><!-- 主体右边结束 -->
		</div><!-- 主体结束 -->
	</body>
	<script>
		// ajax登录验证
		$(function(){
			$('.name').blur(function(){
				 var name=$(".name").val();
				$.ajax({
					url:"<{:U('Login/ajax')}>",
					type:'post',
					dataType:'json',
					data:'name='+name,
					success:function(data){
						// alert('123');
						if(data){
							$('#e').html("用户名可以使用");
						}else{
							$('#e').html("用户名不存在");
						}
					}
				})
			})
		})
	</script>
</html>